<template>
	<view class="page-container">
		<view class="con-1">
			<!-- <nav-bar title="订场率分析" color="white" bg="rgba(0,0,0,0)"></nav-bar> -->
			<nav-bar title="订场率分析" :color="navBarColor" :bg="navBarBg"></nav-bar>
			<view class="bg">
				<view class="address">
					<view class="flex-space-between">
						<view class="flex-align">
							<!-- <van-image v-if="itemChooselist.venue_thumb != ''" width="74rpx" height="74rpx" radius="2" 
								style="margin-right: 10rpx;position: unset" :src="itemChooselist.venue_thumb" /> -->
							<image v-if="itemChooselist.venue_thumb != ''"
								style="margin-right: 10rpx;position: unset;width: 74rpx;height: 74rpx;border-radius: 2rpx;"
								:src="itemChooselist.venue_thumb"></image>
							<van-image v-else width="74rpx" height="74rpx" radius="10rpx" fit="cover" style="margin-right: 10rpx;" src="https://img.yzcdn.cn/vant/cat.jpeg" />
							<view>
								<view class="address-name">{{itemChooselist.venue_name}}</view>
								<view class="address-desc">地址:{{itemChooselist.address}}</view>
							</view>
						</view>
						<view class="exchange flex-center flex-column " @click="show_no">
							<van-icon name="exchange" size="16" />
							切换
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="time-list">
			<view @click="selectDay(item,index)" :class="{'active':dayActive == index}" class="time-item"
				v-for="(item,index) in dataList" :key="index">
				<view class="day">{{item.weeks}}</view>
				<view class="date">{{item.mouth}}/{{item.day}}</view>
			</view>
		</view>
		<!-- 今日实时数据 -->
		<view class="today-stats" style="padding: 30rpx 30rpx 0 30rpx;">
			<view class="today-card">
				<view class="today-header-container">
					<uni-text class="today-header">{{current_month_day}}订场情况</uni-text>
					<view class="today-header-right">
						<uni-text class="update-time">更新于 {{today}}-{{todayData.now}}</uni-text>
						<uni-icons type="reload" size="18" color="#666666" class="refresh-icon"
							@click="handleRefresh" />
					</view>
				</view>
				<view class="today-items">
					<view class="today-item">
						<view class="item-header">
							<uni-text class="item-title">总数</uni-text>
							<view class="stat-compare">
								<uni-text
									:class="['trend-text', todayData.label1.up2 == 1 ? 'up' : 'down']">{{todayData.label1.cha2}}</uni-text>
								<uni-icons :type="todayData.label1.up2 == 1 ? 'arrow-up' : 'arrow-down'" size="14"
									:color="todayData.label1.up2 == 1 ? '#07c160' : '#ee0a24'" />

							</view>
						</view>
						<uni-text class="item-value">{{todaytop.total}}</uni-text>
					</view>
					<view class="divider"></view>
					<view class="today-item">
						<view class="item-header">
							<uni-text class="item-title">订场数</uni-text>
							<view class="stat-compare">
								<uni-text
									:class="['trend-text', todayData.label1.up == 1 ? 'up' : 'down']">{{todayData.label1.cha}}</uni-text>
								<uni-icons :type="todayData.label1.up == 1 ? 'arrow-up' : 'arrow-down'" size="14"
									:color="todayData.label1.up == 1 ? '#07c160' : '#ee0a24'" />

							</view>
						</view>
						<uni-text class="item-value">{{todaytop.order}}</uni-text>
					</view>
					<view class="divider"></view>
					<view class="today-item">
						<view class="item-header">
							<uni-text class="item-title">订场率</uni-text>
							<view class="stat-compare">
								<uni-text
									:class="['trend-text', todayData.label2.up == 1 ? 'up' : 'down']">{{todayData.label2.bi}}</uni-text>
								<uni-icons :type="todayData.label2.up == 1 ? 'arrow-up' : 'arrow-down'" size="14"
									:color="todayData.label2.up == 1? '#07c160' : '#ee0a24'" />

							</view>
						</view>
						<uni-text class="item-value">{{todaytop.per}}</uni-text>
					</view>
					<!-- <view class="divider"></view> -->
					<!-- <view class="today-item">
						<view class="item-header">
							<uni-text class="item-title">核销率</uni-text>
							<view class="stat-compare">
								<uni-icons :type="todayData.label3.up == 1 ? 'arrow-up' : 'arrow-down'" size="14"
									:color="todayData.label3.up == 1 ? '#07c160' : '#ee0a24'" />
								<uni-text
									:class="['trend-text', todayData.label3.up == 1 ? 'up' : 'down']">{{todayData.label3.bi}}</uni-text>
							</view>
						</view>
						<uni-text class="item-value">{{todayData.check}}</uni-text>
					</view> -->
					<!-- <view class="today-item">
						<view class="item-header">
							<uni-text class="item-title">核销率</uni-text>
							<view class="stat-compare">
								<uni-icons :type="todayData.label3.up == 1 ? 'arrow-up' : 'arrow-down'" size="14"
									:color="todayData.label3.up == 1 ? '#07c160' : '#ee0a24'" />
								<uni-text
									:class="['trend-text', todayData.label3.up == 1 ? 'up' : 'down']">{{todayData.label3.bi}}</uni-text>
							</view>
						</view>
						<uni-text class="item-value">{{todayData.check}}</uni-text>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 核心数据看板 -->
		<!-- 场地数据卡片 -->
		<view class="court-cards">
			<view class="court-card" v-for="(court, index) in courtStats" :key="index" @click="handleCourtClick(court)">
				<image class="court-image" :src="court.info.show_img" mode="aspectFill" />
				<view class="court-info">
					<view class="court-name-wrap">
						<uni-text class="court-name">{{court.info.court_name}}</uni-text>
						<view class="name-right">
							<view class="booking-trend">
								<!-- <uni-text class="trend-label">日期范围</uni-text> -->
								<!-- <uni-text class="trend-label">较上期</uni-text>
								<view class="trend-value">
									<uni-icons :type="court.up == 1 ? 'arrow-up' : 'arrow-down'" size="14"
										:color="court.up == 1 ? '#07c160' : '#ee0a24'" />
									<uni-text
										:class="['trend-text', court.up  == 1 ? 'up' : 'down']">{{Math.abs(court.incr_val?court.incr_val:'')}}%</uni-text>
								</view> -->
							</view>
							<!-- <uni-icons type="eye" size="16" color="#666666" /> -->
						</view>
					</view>
					<view class="court-booking">
						<view class="booking-item">
							<uni-text class="booking-label">总可售片数</uni-text>
							<!-- <uni-text class="booking-value">{{court.data.total?court.data.total:0}}</uni-text> -->
							<uni-text class="booking-value">{{court.data.fieldNum}}*{{court.data.timeNum}}</uni-text>
						</view>
						<view class="booking-item">
							<uni-text class="booking-label">已订片数</uni-text>
							<uni-text class="booking-value">{{court.data.order?court.data.order:0}}</uni-text>
						</view>
						<view class="booking-item">
							<uni-text class="booking-label">订场率</uni-text>
							<uni-text class="booking-value">{{court.data.per?court.data.per:''}}%</uni-text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="data-board" style="padding: 30rpx 30rpx 0 30rpx;margin-bottom: 30rpx;">
			<view class="data-card combined-card">
				<view class="combined-info">
					<view class="combined-item">
						<uni-text class="combined-label">总可售片数</uni-text>
						<uni-text class="combined-value">{{coreData.totalCourts}}</uni-text>
					</view>
					<view class="combined-item">
						<uni-text class="combined-label">已订片数</uni-text>
						<uni-text class="combined-value">{{coreData.bookedCourts}}</uni-text>
					</view>
					<view class="combined-item">
						<uni-text class="combined-label">预定率</uni-text>
						<uni-text class="combined-value">{{coreData.usageRate}}%</uni-text>
					</view>
				</view>
				<view class="gauge-scale">
					<qiun-data-charts type="arcbar" :opts="opts" :chartData="Arcbar1" />
				</view>
			</view>
		</view> -->
		<!-- 订单来源分布 -->
		<view class="order-source" style="padding: 30rpx;">
			<view class="source-title">
				<uni-text class="title-text">订单来源分布</uni-text>
				<uni-text class="section-title1">{{ccday}}</uni-text>
				<!-- <view class="source-select" @click="showSourceSelect">
					<uni-text class="selected-source">来源渠道</uni-text>
					<uni-icons type="bottom" size="14" color="#666666" />
				</view> -->
			</view>
			<view class="source-title">
				<view class=" week-list flex-wrap"
					style="display: flex;align-items: center;justify-content: flex-start">
					<view class="week-item" :class="{'active':index === selectId}" v-for="(item,index) in weekList"
						:key="index" @click="timesSelect(item,index)">
						{{item.label}}
					</view>
				</view>
			</view>
			<view class="source-list">
				<view class="source-content">
					<qiun-data-charts type="ring" :opts="opts2" :chartData="chartsDataRing1" />
				</view>
			</view>
			<!-- <view class="percentage">
				<view class="percentage_con" v-for="(item,index) in agelist" :key="index">
					<view class="percentage_add">
						<view class="percentage_l">
							{{item.name}}
						</view>
						<view class="percentage_c">
							{{item.per}}
						</view>
						<view class="percentage_r">
							{{item.num}}笔
						</view>
					</view>
					<u-icon name="arrow-right" color="rgb(153,153,153)" size="14"></u-icon>
				</view>
			</view> -->
		</view>
		<!-- 订场率分析 -->
		<view class="analysis-section" style="padding: 30rpx;">
			<view class="section-header">
				<view class="" style="display: flex;justify-content: space-between;align-items: center;">
					<uni-text class="section-title">订场率分析</uni-text>
					<uni-text class="section-title1">{{ccday}}</uni-text>
				</view>
				<view class="period-tabs">
					<view class=" week-list flex-wrap"
						style="display: flex;align-items: center;justify-content: flex-start">
						<view class="week-item" :class="{'active':item.id == year}" v-for="(item,index) in yearList"
							:key="index" @click="yearSelect(item,index)">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="chart-container">
				<!-- 此处应为图表组件 -->
				<view class="chart-placeholder">
					<!-- <qiun-data-charts type="column" :opts="opts1" :chartData="chartsDataColumn" /> -->
					<!-- <qiun-data-charts type="column" canvasId="scrolllineid" :opts="opts1" :chartData="chartsDataColumn"
						:ontouch="true" :canvas2d="true" /> -->
					<!-- <qiun-data-charts type="mix"
						:opts="{yAxis:{data:[{position: 'left',title: '折线'},{position: 'right',min: 0,max: 200,title: '柱状图',textAlign: 'left'},{position: 'right',min: 0,max: 200,title: '点',textAlign: 'left'}]}}"
						:chartData="Mix" /> -->
					<qiun-data-charts type="column" :opts="opts33" :chartData="Column" />
				</view>
			</view>

		</view>
		<!-- 订场来源分析 -->
		<!-- <view class="source-analysis" style="padding: 0 30rpx 30rpx 30rpx;">
			<view class="section-header">
				<uni-text class="section-title">订场来源分析</uni-text>
			</view>
			<view class="chart-container">
				<view class="chart-placeholder">
					<qiun-data-charts type="pie" :chartData="chartsDataPie1" />
				</view>
			</view>
		</view> -->
		<van-popup closeable :show="show" round position="bottom" @close="showclose">
			<view class="good-box">
				<view class="title">
					切换场馆
				</view>
				<view class="good-list">
					<!-- <van-radio-group :value="radio" @change="onChange"> -->
					<view class="good-item" v-for="(item,index) in venuelist" :key="index" @click="onChangelist(item)">
						<!-- <van-radio :name="index" :value="index" color="#2f75fa"
								:checked="index == 0 ? true : false"> -->
						<view class="flex-align">
							<van-image width="124rpx" height="124rpx" radius="10rpx" fit="cover"
								v-if="item.venue_thumb != ''" :src="item.venue_thumb" />
							<van-image v-else width="124rpx" height="124rpx" radius="10rpx" fit="cover"
								src="https://img.yzcdn.cn/vant/cat.jpeg" />
							<view class="info">
								<view class="name">{{item.venue_name}}</view>
								<view class="flex-align" v-if="item.project_list != ''">
									<view class="tag" v-if="item.project_list[0].name != ''">
										{{item.project_list[0].name}}
									</view>
									<view class="tag" v-if="item.project_list[1].name != ''">
										{{item.project_list[1].name}}
									</view>
									<view class="tag" v-if="item.project_list[2].name != ''">
										{{item.project_list[2].name}}
									</view>
								</view>
								<view class="address">{{item.address}}</view>
							</view>
						</view>
						<!-- </van-radio> -->
					</view>
					<!-- </van-radio-group> -->
				</view>

				<!-- <view class="footer">
					<view class="btn" @click="queren">确认</view>
				</view> -->
			</view>
		</van-popup>
	</view>
</template>
<script>
	const personal = require("@/api/personal/index.js");
	import navbar from '@/mixins/navbar.js';
	export default {
		mixins: [navbar({
			navBarColor: '#fff'
		})],
		data() {
			return {
				itemChooselist: {},
				venuelist: [],
				coreData: {
					totalCourts: 24,
					bookedCourts: 18,
					usageRate: 75
				},
				todayData: {},
				courtStats: [],
				Arcbar1: {
					"series": [{
						"name": "正确率",
						"data": 0.1,
						"color": "#2fc25b"
					}]
				},
				opts: {
					title: {
						name: '30%',
						color: '#2fc25b',
						fontSize: 25
					},
					subtitle: {
						name: '预定率',
						color: '#666666',
						fontSize: 15
					}
				},
				chartsDataColumn: {
					"categories": ["羽毛球", "乒乓球", "篮球", "网球", "游泳", "足球", "美术", "棒垒球"],
					"series": [{
						"name": "总可售片数",
						"data": [35, 36, 31, 33, 13, 34, 36, 31]
					}, {
						"name": "已订片数",
						"data": [18, 27, 21, 24, 6, 28, 21, 24]
					}]
				},
				opts1: {
					enableScroll: true,
					xAxis: {
						scrollShow: true,
						itemCount: 5,
						disableGrid: true
					}
				},
				chartsDataPie1: {
					"series": [{
						"data": [{
							"name": "小程序",
							"value": 50
						}, {
							"name": "web",
							"value": 30
						}, {
							"name": "其他",
							"value": 20
						}]
					}]
				},
				categoryTab: 0,
				categoryTabs: ['小程序', '电脑端', '手机端'],
				chartsDataRing1: {},
				opts2: {
					legend: {
						position: 'bottom'
					},
					title: {
						"name": "总计",
						"fontSize": 15,
						"color": "#666666"
					},
					subtitle: {
						"name": "20%",
						"fontSize": 25,
						"color": "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 20,
							linearType: 'custom',
							centerColor: '#FF0',
						}
					}
				},
				selectId: 0,
				project: '',
				weekList: [],
				yearId: 1,
				year: 0,
				yearList: [{
						id: '0',
						name: '本日'
					}, {
						id: '1',
						name: '本周'
					},
					{
						id: '2',
						name: '本月'
					},
					{
						id: '3',
						name: '本季'
					},
					{
						id: '4',
						name: '本年'
					}
				],
				agelist: [],
				source: [],
				typein: '',
				show: false,
				dataList: [], //日期
				dayActive: 0,
				days: 7,
				chartsDataMix1: {},
				Column: {
					"categories": ["2021", "2022", "2023", "2024", "2025"],
					"series": [{
						"name": "目标值",
						"data": [35, 36, 31, 33, 13, 34]
					}, {
						"name": "完成量",
						"data": [18, 27, 21, 24, 6, 28]
					}]
				},
				Mix: {
					"categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
					"series": [{
						"name": "曲面",
						"data": [70, 50, 85, 130, 64, 88],
						"type": "area",
						"style": "curve"
					}, {
						"name": "柱1",
						"index": 1,
						"data": [40, {
							"value": 30,
							"color": "#f04864"
						}, 55, 110, 24, 58],
						"type": "column"
					}, {
						"name": "柱2",
						"index": 1,
						"data": [50, 20, 75, 60, 34, 38],
						"type": "column"
					}, {
						"name": "曲线",
						"data": [70, 50, 85, 130, 64, 88],
						"type": "line",
						"style": "curve",
						"color": "#1890ff",
						"disableLegend": true
					}, {
						"name": "折线",
						"data": [120, 140, 105, 170, 95, 160],
						"type": "line",
						"color": "#2fc25b"
					}, {
						"name": "点",
						"index": 2,
						"data": [100, 80, 125, 150, 112, 132],
						"type": "point",
						"color": "#f04864"
					}]
				},
				current_month_day: '',
				today: '',
				current_year_month: '',
				current_year_month1: '',
				opts33: {
					extra: {
						column: {
							type: 'meter',
							meterBorde: 1,
							meterFillColor: '#FFFFFF'
						}
					}
				},
				todaytop: {},
				ccday:''
			}
		},
		onLoad() {
			if (uni.getStorageSync("entry_name") == '') {
				uni.showToast({
					title: '请登录！',
					icon: 'exception',
					duration: 850
				});
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/my-center/my-center'
					})
				}, 1000);
			}
			var data = uni.getStorageSync("wqzdy");
			var items = JSON.parse(data)
			this.venuelist = items
			this.itemChooselist = this.venuelist[0]
			this.getCurrentMonthDay()
			this.orderPercent()
			this.fenxi()
			this.countByEverCourt()
			this.getDataList()
		},
		onReady() {
			//模拟从服务器获取数据
			// this.getServerData()
		},
		methods: {
			// 获取今天当前日期
			getCurrentMonthDay() {
				var _this = this
				var now = new Date()
				var y = now.getFullYear()
				var m = now.getMonth() + 1
				var d = now.getDate()
				var h = now.getHours(); //获取当前小时数(0-23)
				var min = now.getMinutes(); //获取当前分钟数(0-59)
				if (m < 10) {
					m = '0' + m
				}
				if (d < 10) {
					d = '0' + d
				}
				if (h < 10) {
					h = '0' + h
				}
				if (min < 10) {
					min = '0' + min
				}
				var date = m + '/' + d
				var date_s = m + '-' + d
				_this.current_month_day = date
				_this.current_year_month = y + '-' + m + '-' + d
				_this.current_year_month1 = y + '-' + m + '-' + d
				_this.today = date
				_this.date_d = date

			},
			getServerData() {
				let that = this
				setTimeout(() => {
					// this.chartsDataColumn3=JSON.parse(JSON.stringify(demodata.Column))
					console.log(JSON.parse(JSON.stringify(demodata.Column)),
						'JSON.parse(JSON.stringify(demodata.Column))')
					console.log(that.chartsDataColumn2, 'that.chartsDataColumn2')
					that.chartsDataColumn3 = that.Column
				}, 1500);
			},
			// 选择每天日期
			selectDay(item, index) {
				console.log(item, index, 'item, index')
				var _this = this
				_this.dayActive = index
				_this.able_list = null
				var now = new Date()
				var y = now.getFullYear()
				_this.date_d = item.mouth + '/' + item.day
				_this.current_year_month = item.year + '-' + item.mouth + '-' + item.day
				_this.current_year_month1 = item.year + '-' + item.mouth + '-' + item.day
				_this.current_month_day = item.mouth + '/' + item.day
				// _this.current_month_day = item.mouth + '-' + item.day
				_this.weeks_data = item.weeks
				_this.orderPercent()
				_this.countByEverCourt()
				this.fenxi()

			},
			// 每天周期
			getDataList() {

				let day = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
				let dataList = []
				for (let i = 0; i < this.days; i++) {
					let date = new Date()
					let nextData = date.setDate(date.getDate() + i)
					let Date2 = new Date(nextData)
					let obj = {
						year: Date2.getFullYear().toString().padStart(2, '0'),
						mouth: (Date2.getMonth() + 1).toString().padStart(2, '0'),
						day: Date2.getDate().toString().padStart(2, '0'),
						weeks: day[Date2.getDay()]
					}
					if (i == 0) {
						obj.weeks = '今天'
					}

					dataList.push(obj)
					this.dataList = dataList
				}
			},
			onChangelist(item) {
				this.itemChoose = item
				this.itemChooselist = this.itemChoose
				this.show = false
				this.dateActive = '5'
				this.nac = '5'
				this.orderPercent()
				this.fenxi()
				this.countByEverCourt()
			},
			show_no() {
				this.show = true
			},
			handleRefresh() {
				this.orderPercent()
			},
			async orderPercent() {
				let that = this;
				let params = {
					venue_id: this.itemChooselist.id,
					choose_date: this.current_year_month
				}
				let res = await personal.orderPercent(params)
				if (res.code == 1) {
					this.opts = res.data.opts
					this.todayData = res.data.real
					this.todaytop = res.data.top
					this.coreData.totalCourts = res.data.top.total
					this.coreData.bookedCourts = res.data.top.order
					this.coreData.usageRate = res.data.top.per
					this.gertOrderSourceLabel()
				}
			},
			async countByEverCourt() {
				let that = this;
				let params = {
					venue_id: this.itemChooselist.id,
					choose_date: this.current_year_month
				}
				let res = await personal.countByEverCourt(params)
				if (res.code === 1) {
					this.courtStats = res.data
				}
			},
			async fenxi() {
				let that = this;
				let params = {
					venue_id: this.itemChooselist.id,
					date_type: this.year,
					choose_date: this.current_year_month
				}
				let res = await personal.fenxi(params)
				if (res.code === 1) {
					this.opts33 = res.data.opts33
					this.Column = res.data.column
					this.ccday = res.data.ccday
				}
			},

			async gertOrderSourceLabel() {
				let that = this;
				let params = {
					venue_id: this.itemChooselist.id,
					choose_date: this.current_year_month1
				}
				let res = await personal.gertOrderSourceLabel(params)
				if (res.code === 1) {
					this.weekList = res.data
					this.typein = res.data[0].value
					this.orderSource()
				}
			},
			async orderSource() {
				let that = this;
				let params = {
					venue_id: this.itemChooselist.id,
					type: this.typein,
					choose_date: this.current_year_month1
				}
				let res = await personal.orderSource(params)
				if (res.code === 1) {
					this.source = res.data.source
					this.chartsDataRing1 = res.data.chartsDataRing1
					this.opts2 = res.data.opts2
					const firstObj = this.weekList[0]
					const values = firstObj.value
					this.agelist = this.source[values]
				}
			},
			async order_Source() {
				let that = this;
				let params = {
					venue_id: this.itemChooselist.id,
					type: this.typein,
					choose_date: this.current_year_month1
				}
				let res = await personal.orderSource(params)
				if (res.code === 1) {
					this.source = res.data.source
					this.chartsDataRing1 = res.data.chartsDataRing1
					this.opts2 = res.data.opts2
				}
			},
			showSourceSelect() {
				let that = this
				uni.showActionSheet({
					itemList: this.categoryTabs,
					success: function(res) {
						console.log(res.tapIndex, 'res')
						that.categoryTab = res.tapIndex
						console.log(that.categoryTab)
					}
				});
			},
			yearSelect(item, index) {
				this.yearId = index
				this.year = item.id
				this.current_year_month = ''
				this.fenxi()
			},
			timesSelect(item, index) {
				this.typein = item.value
				this.order_Source()
				this.selectId = index
				this.project = item.id
				const firstObj = item
				const values = firstObj.value
				this.agelist = this.source[values]
			},
		}
	}
</script>
<style lang="less" scoped>
	page {
		height: 100%;
	}

	.page-container {
		min-height: 100%;
		// padding: 30rpx;
		background-color: #f5f6f7;

		.time-list {
			padding: 8rpx 30rpx;
			display: flex;
			align-items: center;

			.time-item {
				flex: 1;
				padding: 15rpx 0;
				border-radius: 10rpx;
				color: #333333;
				display: flex;
				flex-direction: column;
				align-items: center;

				.day {
					font-size: 22rpx;
					font-weight: bold;
				}

				.date {
					font-family: PingFang SC;
					// font-weight: bold;
					font-size: 19rpx;
					margin-top: 10rpx;
				}
			}

			.active {
				background-color: #FF8E05;
				color: white;
			}
		}

		/deep/ .good-box {
			height: 60vh;
			padding: 0px 30rpx;
			display: flex;
			flex-direction: column;

			.title {
				color: #000;
				font-size: 30rpx;
				font-weight: 700;
				margin-top: 40rpx;
			}

			.van-radio__label {
				line-height: inherit;
			}

			.good-list {
				flex: 1;
				height: 0;
				overflow: auto;

				.good-item {
					margin-top: 30rpx;

					.info {
						margin-left: 25rpx;

						.address {
							color: #fff;
							padding-top: 20rpx;
							padding-right: 30rpx;
							height: 70rpx;

							&-name {
								font-size: 34rpx;
								font-weight: 700;
								line-height: 34rpx;
							}

							&-desc {
								margin-top: 18rpx;
								font-size: 22rpx;
								line-height: 22rpx;
							}

							.exchange {
								width: 100rpx;
								height: 100rpx;
								border-radius: 50%;
								background-color: rgba(0, 0, 0, 0.2);
								color: rgb(234, 248, 248);
								font-size: 24rpx;
							}
						}

						.name {
							color: rgb(51, 51, 51);
							font-size: 30rpx;
							font-weight: 500;
							margin-bottom: 10rpx;
						}


						.tag {
							color: rgb(4, 179, 90);
							font-size: 24rpx;
							font-weight: 500;
							padding: 0px 10rpx;
							margin-right: 20rpx;
							background-color: rgba(4, 179, 90, 0.2);
							border-radius: 4rpx;

							&:nth-of-type(2) {
								color: rgb(236, 70, 246);
								background-color: rgba(236, 70, 246, 0.2);
							}
						}

						.address {
							margin-top: 10rpx;
							color: rgb(136, 136, 136);
							font-size: 22rpx;
						}
					}

				}
			}

			.footer {
				padding: 20rpx 0;
				background-color: rgb(255, 255, 255);

				.btn {
					color: rgb(255, 255, 255);
					font-size: 30rpx;
					font-weight: 700;
					padding: 20rpx 0;
					text-align: center;
					background-image: linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(165, 173, 246) 100%);
					border-radius: 60rpx;
				}
			}
		}

		.con-1 {
			width: 100%;
			position: relative;

			/deep/ .nav-bar {
				position: fixed;
			}

			.bg {
				width: 100%;
				height: 300rpx;
				background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/5d1ccc3b7ac6cc185130c88a8ac2e90b1eeba707.png");
				background-size: 100%;
				background-position: 50% 80%;

				.address {
					color: #fff;
					padding-top: 190rpx;
					padding-right: 30rpx;
					padding-left: 30rpx;
					height: 150rpx;

					&-name {
						font-size: 34rpx;
						font-weight: 700;
						line-height: 34rpx;
					}

					&-desc {
						margin-top: 18rpx;
						font-size: 22rpx;
						line-height: 22rpx;
					}

					.exchange {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						background-color: rgba(0, 0, 0, 0.2);
						color: rgb(234, 248, 248);
						font-size: 24rpx;
					}
				}
			}
		}
	}

	.venue-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		padding: 30rpx;
		background-color: #ffffff;
		border-radius: 12px;
	}

	.venue-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8px;
		object-fit: cover;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.venue-info {
		position: relative;
		z-index: 2;
	}

	.switch-venue-btn {
		position: relative;
		z-index: 2;
	}

	.switch-venue-btn {
		display: flex;
		align-items: center;
		padding: 16rpx 24rpx;
		background-color: #f5f6f7;
		border-radius: 8px;
		cursor: pointer;
	}

	.venue-info {
		flex: 1;
	}

	.venue-name {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
		margin-right: 20rpx;
		color: #333333;
	}

	.address {
		font-size: 14px;
		color: #666666;
	}

	.data-board {
		// margin-bottom: 30rpx;
	}

	.data-card {
		background-color: #ffffff;
		border-radius: 12px;
		position: relative;
		padding: 40rpx 40rpx 0 40rpx;
	}

	.combined-card {
		background: #ffffff;
		overflow: hidden;
	}

	// .combined-card::before {
	// 	content: '';
	// 	position: absolute;
	// 	bottom: 0;
	// 	left: 0;
	// 	width: 100%;
	// 	height: 200rpx;
	// }

	// .combined-card::after {
	// 	content: '';
	// 	position: absolute;
	// 	bottom: 20rpx;
	// 	left: 50%;
	// 	width: 4rpx;
	// 	height: 100rpx;
	// 	background: #333333;
	// 	transform-origin: bottom center;
	// 	transform: rotate(calc((var(--percentage) - 50) * 1.8deg)) translateX(-50%);
	// 	border-radius: 4rpx;
	// 	transition: transform 0.3s ease;
	// 	z-index: 2;
	// }

	.combined-card .gauge-scale {
		// position: absolute;
		// bottom: 20rpx;
		// left: 50%;
		// transform: translateX(-50%);
		width: 600rpx;
		height: 400rpx;
		// border-radius: 200rpx 200rpx 0 0;
		// border: 2px solid #E5E7EB;
		// border-bottom: none;
	}

	// .combined-card .gauge-scale::before,
	// .combined-card .gauge-scale::after {
	// 	content: '';
	// 	position: absolute;
	// 	bottom: 0;
	// 	width: 2px;
	// 	height: 10rpx;
	// 	background: #333333;
	// }

	// .combined-card .gauge-scale::before {
	// 	left: 0;
	// 	transform: rotate(-90deg) translateX(5rpx);
	// }

	// .combined-card .gauge-scale::after {
	// 	right: 0;
	// 	transform: rotate(90deg) translateX(-5rpx);
	// }

	// .combined-card .gauge-labels {
	// 	position: absolute;
	// 	bottom: 40rpx;
	// 	left: 0;
	// 	width: 100%;
	// 	display: flex;
	// 	justify-content: space-between;
	// 	padding: 0 80rpx;
	// 	color: #666666;
	// 	font-size: 12px;
	// }

	.combined-info {
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: relative;
		z-index: 1;
		margin-bottom: 20rpx;
	}

	.combined-item {
		text-align: center;
	}

	.combined-label {
		display: block;
		font-size: 14px;
		color: #666666;
		margin-bottom: 20rpx;
	}

	.combined-value {
		display: block;
		font-size: 24px;
		font-weight: bold;
		color: #333333;
	}

	// .combined-card::before {
	// 	content: '';
	// 	position: absolute;
	// 	bottom: 0;
	// 	left: 0;
	// 	width: 100%;
	// 	height: 200rpx;
	// 	background: #f8f9fa;
	// 	border-radius: 0 0 12px 12px;
	// }

	// .combined-card::after {
	// 	content: '';
	// 	position: absolute;
	// 	bottom: 20rpx;
	// 	left: 50%;
	// 	width: 4rpx;
	// 	height: 100rpx;
	// 	background: #333333;
	// 	transform-origin: bottom center;
	// 	transform: rotate(calc(var(--percentage) * 1.8deg)) translateX(-50%);
	// 	border-radius: 4rpx;
	// 	transition: transform 0.3s ease;
	// }

	.today-stats {
		// margin-bottom: 30rpx;
	}

	.today-card {
		background-color: #ffffff;
		border-radius: 12px;
		padding: 30rpx 20rpx;
	}

	.today-header-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.today-header {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
	}

	.today-header-right {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.update-time {
		font-size: 12px;
		color: #999999;
	}

	.refresh-icon {
		cursor: pointer;
	}

	.today-items {
		display: flex;
		justify-content: space-between;
	}

	.today-item {
		flex: 1;
		text-align: center;
		position: relative;
	}

	.item-header {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 16rpx;
	}

	.item-title {
		font-size: 14px;
		color: #666666;
		margin-right: 10rpx;
	}

	.item-value {
		display: block;
		font-size: 20px;
		font-weight: bold;
		color: #333333;
	}

	.divider {
		width: 1px;
		height: 60rpx;
		background-color: #e5e5e5;
		margin: auto 10rpx;
	}

	.stat-compare {
		display: flex;
		align-items: center;
	}

	.trend-text {
		margin-left: 8rpx;
		font-size: 14px;
	}

	.trend-text.up {
		color: #07c160;
	}

	.trend-text.down {
		color: #ee0a24;
	}

	.order-source {
		background-color: #ffffff;
		border-radius: 12px;
		padding: 30rpx;
		margin-bottom: 30rpx;
		// padding: 25rpx 30rpx 20rpx 30rpx;

		.week-item {
			background-color: rgb(243, 243, 243);
			border-radius: 5rpx;
			text-align: center;
			color: rgb(51, 51, 51);
			font-size: 24rpx;
			font-weight: 500;
			border: solid 2rpx transparent;
			box-sizing: border-box;
			padding: 6rpx 15rpx;
			margin-top: 20rpx;
			margin-right: 20rpx;
		}

		.active {
			color: rgba(255, 255, 255, 1.0);
			background-color: rgba(0, 0, 255, 1);
			position: relative;
		}
	}

	.source-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// margin-bottom: 30rpx;
	}

	.source-select {
		display: flex;
		align-items: center;
		gap: 10rpx;
		padding: 12rpx 24rpx;
		background-color: #f5f6f7;
		border-radius: 8px;
		cursor: pointer;
	}

	.selected-source {
		font-size: 14px;
		color: #333333;
	}

	.period-tabs {
		display: flex;
		gap: 20rpx;

		.week-item {
			background-color: rgb(243, 243, 243);
			border-radius: 5rpx;
			text-align: center;
			color: rgb(51, 51, 51);
			font-size: 24rpx;
			font-weight: 500;
			border: solid 2rpx transparent;
			box-sizing: border-box;
			padding: 6rpx 15rpx;
			margin-top: 20rpx;
			margin-right: 20rpx;
		}

		.active {
			color: rgba(255, 255, 255, 1.0);
			background-color: rgba(0, 0, 255, 1);
			position: relative;
		}
	}

	.title-text {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
	}

	.total-orders {
		font-size: 14px;
		color: #999999;
	}

	.source-content {
		display: flex;
		align-items: flex-start;
		gap: 40rpx;
	}

	.source-circle-chart {
		position: relative;
		width: 200rpx;
		height: 200rpx;
		flex-shrink: 0;
	}

	.circle-segment {
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.circle-center {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 120rpx;
		height: 120rpx;
		background-color: #fff;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		color: #666666;
	}

	.circle-center-bottom {
		position: absolute;
		bottom: -40rpx;
		left: 50%;
		transform: translateX(-50%);
		white-space: nowrap;
		font-size: 12px;
		color: #666666;
	}

	.circle-segment-0 {
		background: conic-gradient(#4080FF 0% 32%);
	}

	.circle-segment-1 {
		background: conic-gradient(transparent 0% 32%, #36CFC9 32% 73%);
	}

	.circle-segment-2 {
		background: conic-gradient(transparent 0% 73%, #73D13D 73% 90%);
		display: block;
	}

	.circle-segment-3 {
		background: conic-gradient(transparent 0% 90%, #FF7A45 90% 100%);
		display: block;
	}

	.source-list-container {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.percentage {
		.percentage_con {
			display: flex;
			flex-direction: row;
			padding: 10rpx;
			background-color: #f8f9fa;
			border-radius: 12px;
			gap: 20rpx;
			cursor: pointer;
			transition: all 0.3s ease;
			margin-bottom: 10rpx;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;

			.percentage_add {
				display: flex;
				flex-direction: row;
				justify-content: space-around;

				.percentage_l {
					margin-left: 20rpx;
				}

				.percentage_c {
					margin-left: 40rpx;
				}

				.percentage_r {
					margin-left: 40rpx;
				}
			}


		}
	}

	.source-dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}

	.source-dot-0 {
		background-color: #4080FF;
	}

	.source-dot-1 {
		background-color: #36CFC9;
	}

	.source-dot-2 {
		background-color: #73D13D;
	}

	.source-dot-3 {
		background-color: #FF7A45;
	}

	.source-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		background-color: #f8f9fa;
		border-radius: 8px;
	}

	.source-left {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.source-name {
		font-size: 14px;
		color: #333333;
	}

	.source-percent {
		font-size: 14px;
		color: #666666;
	}

	.source-right {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.source-count {
		font-size: 14px;
		color: #666666;
	}

	.analysis-section,
	.source-analysis {
		background-color: #ffffff;
		border-radius: 12px;
		padding: 30rpx;
		// margin-bottom: 30rpx;
	}

	.section-header {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
	}
	.section-title1 {
		font-size: 10px;
		// font-weight: bold;
		color: #333333;
	}

	.period-tabs {
		display: flex;
		gap: 20rpx;
	}

	.chart-container {
		width: 100%;
		height: 600rpx;
		margin-bottom: 30rpx;
	}

	.court-cards {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		background-color: #fff;
	}

	.court-card {
		display: flex;
		padding: 30rpx;
		background-color: #f8f9fa;
		border-radius: 12px;
		gap: 20rpx;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.court-card:active {
		opacity: 0.8;
		transform: scale(0.98);
	}

	.court-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8px;
		object-fit: cover;
		flex-shrink: 0;
	}

	.court-info {
		flex: 1;
	}

	.court-name-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.court-name {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
	}

	.name-right {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.court-booking {
		display: flex;
		gap: 40rpx;
		margin-bottom: 20rpx;
	}

	.booking-item {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.booking-label {
		font-size: 12px;
		color: #666666;
	}

	.booking-value {
		font-size: 16px;
		color: #333333;
		font-weight: bold;
	}

	.booking-trend {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.trend-label {
		font-size: 12px;
		color: #666666;
	}

	.trend-value {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.trend-text {
		font-size: 14px;
	}

	.trend-text.up {
		color: #07c160;
	}

	.trend-text.down {
		color: #ee0a24;
	}

	.chart-placeholder {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f8f9fa;
		color: #999999;
		font-size: 14px;
		border-radius: 8px;
	}
</style>